<clr-wizard #wizard [(clrWizardOpen)]="opened" [clrWizardClosable]="false" (clrWizardOnCancel)="onCancel()">
    <clr-wizard-title>{{'APP_PLAN_ADD'|translate}}</clr-wizard-title>

    <clr-wizard-button [type]="'cancel'">{{'APP_CANCEL'|translate}}</clr-wizard-button>
    <clr-wizard-button [type]="'previous'">{{'APP_BACK'|translate}}</clr-wizard-button>
    <clr-wizard-button [type]="'next'">{{'APP_NEXT'|translate}}</clr-wizard-button>
    <clr-wizard-button [type]="'finish'">{{'APP_FINISH'|translate}}</clr-wizard-button>

    <clr-wizard-page [clrWizardPageNextDisabled]="basicForm.invalid"
                     (clrWizardPageOnCommit)="onBasicFormCommit()">
        <ng-template clrPageTitle>{{'APP_BASIC_INFORMATION'|translate}}</ng-template>
        <form clrForm #basicForm="ngForm">
            <clr-input-container>
                <label>{{'APP_NAME'|translate}}</label>
                <input clrInput size=45 type="text" maxlength="15" [(ngModel)]="item.name" pattern="{{namePattern}}"
                       name="name" required>
                <clr-control-helper>{{namePatternHelper}}</clr-control-helper>
                <clr-control-error>{{namePatternHelper}}</clr-control-error>
            </clr-input-container>
            <clr-select-container>
                <label>{{'APP_REGION'|translate}}</label>
                <select clrSelect [(ngModel)]="item.region" name="provider" (change)="onRegionChange()" required>
                    <option value="">{{'APP_DEFAULT_OPTION'|translate}}</option>
                    <option *ngFor="let re of regions" [value]="re.name">{{re.name}}</option>
                </select>
                <clr-control-error>{{'APP_REQUIRED_ERROR'|translate}}</clr-control-error>
            </clr-select-container>
            <clr-select-container>
                <label>{{'APP_PLAN_DEPLOY_TEMPLATE'|translate}}</label>
                <select [(ngModel)]="item.deployTemplate" name="template" (change)="onDeployChange()" required
                        clrSelect>
                    <option value="">{{'APP_DEFAULT_OPTION'|translate}}</option>
                    <option value="SINGLE">{{'APP_PLAN_DEPLOY_TEMPLATE_SINGLE'|translate}}</option>
                    <option value="MULTIPLE">{{'APP_PLAN_DEPLOY_TEMPLATE_MULTIPLE'|translate}}</option>
                </select>
                <clr-control-error>{{'APP_REQUIRED_ERROR'|translate}}</clr-control-error>
            </clr-select-container>
            <clr-select-container>
                <label>{{'APP_PROJECT'|translate}}</label>
                <select clrSelect [(ngModel)]="item.projects" name="item" multiple required>
                    <option *ngFor="let item of projects" [value]="item.name">{{item.name}}</option>
                </select>
                <clr-control-helper>{{'APP_PLAN_PROJECT_HELPER'|translate}}</clr-control-helper>
            </clr-select-container>
        </form>
    </clr-wizard-page>
    <clr-wizard-page [clrWizardPageNextDisabled]="planForm.invalid" (clrWizardPageCustomButton)="onSubmit()">
        <ng-template clrPageTitle>{{'APP_PLAN_DEPLOY_CONFIG'|translate}}</ng-template>
        <form clrForm #planForm="ngForm">
            <clr-select-container *ngIf="item.deployTemplate === 'SINGLE'">
                <label>{{'APP_ZONE'|translate}}</label>
                <select clrSelect [(ngModel)]="item.zone" name="cloud-region" required>
                    <option value="">{{'APP_DEFAULT_OPTION'|translate}}</option>
                    <option *ngFor="let zone of zones" [value]="zone.id">{{zone.name}}</option>
                </select>
                <clr-control-error>{{'APP_REQUIRED_ERROR'|translate}}</clr-control-error>
                <clr-control-helper>{{'APP_ZONE_HELPER'|translate}}</clr-control-helper>
            </clr-select-container>

            <clr-select-container *ngIf="item.deployTemplate === 'MULTIPLE'">
                <label>{{'APP_ZONE'|translate}}</label>
                <select clrSelect [(ngModel)]="item.zones" name="cloud-region" multiple required>
                    <option value="">{{'APP_DEFAULT_OPTION'|translate}}</option>
                    <option *ngFor="let zone of zones" [value]="zone.id">{{zone.name}}</option>
                </select>
                <clr-control-error>{{'APP_REQUIRED_ERROR'|translate}}</clr-control-error>
                <clr-control-helper>{{'APP_ZONE_HELPER'|translate}}</clr-control-helper>
                <clr-control-helper></clr-control-helper>
            </clr-select-container>
            <clr-select-container>
                <label>{{'APP_PLAN_DEPLOY_MASTER'|translate}}</label>
                <select clrSelect [(ngModel)]="item.planVars['masterModel']" name="master" required>
                    <option value="">{{'APP_DEFAULT_OPTION'|translate}}</option>
                    <option *ngFor="let model of vmConfigs" [value]="model.name">{{model.name}}</option>
                </select>
                <clr-control-error>{{'APP_REQUIRED_ERROR'|translate}}</clr-control-error>
            </clr-select-container>
            <clr-select-container>
                <label>{{'APP_PLAN_DEPLOY_WORKER'|translate}}</label>
                <select clrSelect [(ngModel)]="item.planVars['workerModel']" name="worker" required>
                    <option value="">{{'APP_DEFAULT_OPTION'|translate}}</option>
                    <option *ngFor="let model of vmConfigs" [value]="model.name">{{model.name}}</option>
                </select>
                <clr-control-error>{{'APP_REQUIRED_ERROR'|translate}}</clr-control-error>
            </clr-select-container>
        </form>
        <div *ngIf="vmConfigs">
            <h3>{{'APP_PLAN_DEPLOY_CONFIG_REFERENCE'|translate}}</h3>
            <p class="p7 prompt" *ngIf="currentProvider=='vSphere'">{{'APP_PLAN_VSPHERE_MSG'|translate}}</p>
            <table class="table">
                <thead>
                <tr>
                    <th>{{'APP_CONFIG'|translate}}</th>
                    <th>{{'APP_CPU'|translate}}</th>
                    <th>{{'APP_HOST_MEMORY_GB'|translate}}</th>
                    <th *ngIf="currentProvider=='OpenStack'">{{'APP_HOST_DISK'|translate}}</th>
                </tr>
                </thead>
                <tbody>
                <tr *ngFor="let model of vmConfigs">
                    <td>{{model.name}}</td>
                    <td>{{model.config.cpu}}</td>
                    <td>{{model.config.memory}}</td>
                    <td *ngIf="currentProvider=='OpenStack'">{{model.config.disk}}</td>
                </tr>
                </tbody>
            </table>
        </div>
        <app-modal-alert></app-modal-alert>
        <ng-template clrPageButtons>
            <clr-wizard-button [type]="'cancel'">{{'APP_CANCEL'|translate}}</clr-wizard-button>
            <clr-wizard-button [type]="'previous'">{{'APP_BACK'|translate}}</clr-wizard-button>
            <clr-wizard-button [type]="'custom-finish'">{{'APP_FINISH'|translate}}</clr-wizard-button>
        </ng-template>
    </clr-wizard-page>
</clr-wizard>



